<h1>
	元素 Ext.Element
</h1>

<div id="get-el" class="sect">
	<h2>
		获取元素（Getting Elements）
	</h2>

	<p>
		一份HTML文档通常由大量的装饰元素（markup）所组成。每当浏览器加载当前的html文档，html文档其中的每一个标签都被翻译为HTMLElement以构建装饰树的文件对象模型（
		<a href="https://developer.mozilla.org/En/DOM">Document Object
			Model</a>，DOM）。你可以在浏览器的全局空间中找到一个称为document的变量，那个document就是DOM树的对象。document记忆了当页面加载完毕后而形成的每一份装饰元素引用。
	</p>

	<p>
		document对象有一个重要的方法
		<a
			href="https://developer.mozilla.org/en/DOM/document.getElementById ">getElementById</a>，允许在每个浏览中获取其中的
		<a href="https://developer.mozilla.org/en/DOM/element">HTMLElement</a>对象。然而，直接操纵DOM来说还有许多要注意的问题。Ext
		Core实现了Ext.Element类来封装（Wrap around）各浏览器不同HTMLElement的对象。
	</p>
	<p>
		Ext.Element占Ext Core库的篇幅很大，其中方法就占据了大部份。因此我们将这些方法可分为下面几类：
	</p>
	<ul>
		<li>
			CSS与样式（如setStyle、addClass）
		</li>
		<li>
			DOM查询或遍历（如query、select、findParent）
		</li>
		<li>
			DOM操控（如createChild、remove）
		</li>
		<li>
			元素的方位、尺寸（如getHeight、getWidth）
		</li>
	</ul>
	<p>
		你可以使用Ext.get方法创建Ext.Element的实例，达到封装普通的HTMLElement之目的。例如你有已一个id名为“myElementId”的元素，便可以这样获取：
	</p>
	<pre>
var el = Ext.get(<span class="string">'myElementId'</span>);</pre>

	<p>
		用
		<a href="http://www.getfirebug.com/">Firebug</a>执行以下代码后，观察Ext.Element身上的方法有哪些。有一点要注意的就是，你正在观察的是普通JavaScript对象，我意思是说无所谓的public与private的方法，它们均有在此列出，若有疑问可参考API文档。
	</p>
<pre>
var el = Ext.get(<span class="string">'myElementId'</span>);
console.dir(el);</pre>
	<img src="content-images/element-firebug-dir-sm.png"
		style="padding-bottom: 10px;" />

	<p id="myElementId">
		<a href="http://getfirebug.com/console.html">console.dir</a>命令由Firebug提供，执行该可方便地列出某个对象身上有什么成员，这都是例于开发者阅读的形式显示的。你换可以通过折叠某个子对象以了解其牵连的属性。如图，属性显示是黑色的，方法/函数是绿色的，构造器（constructors）或类（class）就是红色的。现在我对id为myElementId的段落元素进行操作:
	</p>



	<p>
		接下来我们操作上文体到的元素
		<i>myElementId</i>.
	</p>

	<pre>
var el = Ext.get(<span class="string">'myElementId'</span>);
el.addClass(<span class="string">'error'</span>);</pre>

	<p>
		这段代码作用后段落的字体颜色就变为红色，页面的CSS规则有error的样式类，属于error类的元素就会有红色效果：
	</p>
	<pre>
	.error {<span class="string">color</span>: <span class="keyword">red</span>;}</pre>


	<p>
		下一小节（CSS类与样式）会简介关于处理元素的不同方式。
		<p>
</div>

<div id="flyweight" class="sect">
	<h2>
		理解 Flyweight
	</h2>
	<p>
		<a href="http://en.wikipedia.org/wiki/Flyweight_pattern">享元模式（Flyweight
			Design Pattern）</a>是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。
	</p>
	<p>
		Ext在启动的时候就创建了一个全局的Ext.Element对象专为Flyweight的设计服务。这个全局的Flyweight实例可以为Dom里面任何一个节点保存引用。要访问这种Flyweight的对象请使用Ext.fly方法。Ext新手可能会因Ext.get()与Ext.fly()两者之间的用法而犯湖涂。
	</p>
	<p>
		如果感觉这个Ext.Element元素是一直下去多次引用的，那么可以使用Ext.get方法；如果在一段时间内不需要存储元素的引用，那么就使整个库部共享的对象Flyweight的Ext.Element对象。通过Flyweight访问元素，用Ext.fly(/*元素id*/)的方法。
	</p>
	<p>
		再如上面那段落，我们撤销样式。
	</p>

	<pre>Ext.fly(<span class="string">'myElementId'</span>).removeClass(<span class="string">'error'</span>);</pre>

	<p>
		当执行这代码，Ext就复用现有的享元对象，不一定要建立一个全新Ext.Element对象。fly方法较适合单行的、一次性的原子操作（atomic
		operation），就算你想将某个元素存储起来也是无效的，因为其它代码很有机会改变对象。例如，我们看看下面的代码：
	</p>

	<pre>
	var el = Ext.fly(<span class="string">'foo'</span>);
Ext.fly(<span class="string">'bar'</span>).frame();
el.addClass(<span class="string">'error'</span>);</pre>

	<p>
		frame()是Ext.Element包中的动画方法，产生高亮的效果，你可以估计一下，有什么现象出现？
	</p>
	<p>
		答案是id为bar的那个元素会产生frame效果随后立即应用上error的CSS样式效果，那foo
		id的元素可什么事情都没有发生，这是由于指向Flyweight对象的el引用已经被产生过frame效果的所使用。
	</p>
	<p>
		el就是bar元素，这是关于Flyweight享元用法的重要内容，如果你想搞清楚Ext.fly方法的用途适宜再看看这部份的内容。
	</p>

	<ul>
		<li>
			<b>Ext.get</b>
			<div>
				Ext.get()可接收这几种类型的参数，如HTMLElement，Ext.Element、字符型，返回的新实例。

				<br />
				以下三种类型都会返回Ext.Element：
				<pre>
<span class="keyword">var</span> el1 = Ext.get(<span class="string">'elId'</span>); <span class="comment"> // 接收元素id</span>
<span class="keyword">var</span> el2 = Ext.get(<span class="string">el1</span>); <span class="comment">// 接受Ext.Element</span>
<span class="keyword">var</span> el3 = Ext.get(el1.dom); <span class="comment">// 接受 HTMLElement</span></pre>
			</div>
		</li>
		<li>
			<b>Ext.fly</b>
			<div>
				Ext.fly在参数方面与Ext.get的完全相同，但其内置控制返回Ext.Element的方法就完全不同，Ext.fly
				<b>从不</b>保存享元对象的引用，每次调用方法都返回独立的享元对象。其实区别在于“缓存”中，因为缓存的缘故，Ext.get需要为每个元素保存其引用，就形成了缓存，如果有相同的调用就返回，但Ext.fly没有所谓的缓存机制，得到什么就返回什么，不是多次使用的情况下“一次性地”使用该元素就应该使用Ext.fly（例如执行单项的任务）。
				<br />
				<br />
				使用Ext.fly的例子：
				<pre>
 <span class="comment">// 引用该元素一次即可，搞掂了就完工.</span>
Ext.fly(<span class="string">'elId'</span>).hide();</pre>
			</div>
		</li>
		<li>
			<b>Ext.getDom</b>
			<div>
				送入String (id)、dom节点和Ext.Element的参数，Ext.getDom只会返回一个普通的dom节点。如下例：
				<br />

				<pre><span class="comment">// 使用ID获得Dom</span>
<span class="keyword">var</span> elDom = Ext.getDom(<span class="string">'elId'</span>); 
<span class="comment">// 使用dom获得dom</span>
<span class="keyword">var</span> elDom1 = Ext.getDom(elDom); 
<span class="comment">// 如果我们不了解Ext.Element是什么直接用Ext.getDom返回旧的dom节点好了</span>
<span class="keyword">function</span>(el){
	<span class="keyword">var</span> dom = Ext.getDom(el);
	<span class="comment"> // 接下来干些事情……</span>
}</pre>
			</div>
		</li>
	</ul>
</div>

<div id="css-styling" class="sect">
	<h2>
		CSS样式
	</h2>
	<p>

		通过学习markup装饰部分，我们已经晓得，装饰与document的紧密联系下如何透过Ext
		Core较简便地取得数据。但进行document的布局又如何编排呢？是不是有一种方法可以控制布局也可以控制document的样式呢？答案便是用
		<a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets
			(CSS)</a>处理。CSS正是用来页面可视化信息和布局的语言。Ext
		Core在方面真的是让我们用户感觉好使好用，易如反掌，——直接修改它就行了。
	</p>
	<p>
		<pre>
&lt;<span class="keyword">style</span> type=<span class="string">"text/css"</span>&gt;
myCls {
	color: #F00;
}
&lt;/<span class="keyword">style</span>&gt;

...

&lt;<span class="keyword">div</span> type=<span class="string">"myCls"</span>&gt;Hello&lt;/<span class="keyword">div</span>&gt;</pre>
		上一例中我们赋予div元素“您好”的文本和让其颜色为红色（#F00）。
	</p>
	<p>
		我们已经晓得Firebug，可以为我们带来页面开发上的种种便利。凡页面中的任意一元素上面右击，选择“Inspect
		Element”（检测元素），弹出Firebug可以观察到dom树中真实情况，该元素是定义在哪里的。Dom树右边的面板就是对应该元素身上的样式。


		<img src="content-images/firebug-style-sm.png" />
		<br />
		如果你未曾熟悉Firebug的话，暂时放下这块建议先学习一下它。它仿佛就是Web开发的高级示波器！心血来潮地修改站点的样式抑或是调试站点的样式，“Inspect
		Element”功能都贡献殊大。回到Ext中，我们看看Ext Core中有哪些方法是为修改CSS所服务的。
	</p>

	<ul>
		<li>
			<b>addClass</b>
			<div>
				轻松地为一个元素添加样式：
				<pre>
Ext.fly(<span class="string">'elId'</span>).addClass(<span class="string">'myCls'); <span class="comment">// 加入元素的'myCls'的样式
				</pre>
			</div>
		</li>
		<li>
			<b>radioClass</b>
			<div>
				添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。
				<pre>
<span class="comment">// 为元素添加'myCls'在所有侧边元素上删除'myCls'样式</span>
<span class="comment">// 全部相邻节点.</span>
Ext.fly(<span class="string">'elId'</span>).radioClass(<span class="string">'myCls'</span>);</pre>
			</div>

		</li>
		<li>
			<b>removeClass</b>
			<div>
				移除元素身上一个或多个的CSS类。
				<pre>
Ext.fly(<span class="string">'elId'</span>).removeClass(<span class="string">'myCls'</span>); <span class="comment">//移除元素的样式'myCls'</span>
				</pre>
			</div>
		</li>
		<li>
			<b>toggleClass</b>
			<div>
				轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。
				<pre>
Ext.fly(<span class="string">'elId'</span>).toggleClass(<span class="string">'myCls'</span>); <span class="comment">//  加入样式</span>
Ext.fly(<span class="string">'elId'</span>).toggleClass(<span class="string">'myCls'</span>); <span class="comment">//  移除样式</span>
Ext.fly(<span class="string">'elId'</span>).toggleClass(<span class="string">'myCls'</span>); <span class="comment">// 再次被添加</span>
				</pre>
			</div>
		</li>
		<li>
			<b>hasClass</b>
			<div>
				检查某个CSS类是否作用于这个元素身上。
				<pre>
if (Ext.fly(<span class="string">'elId'</span>).hasClass(<span class="string">'myCls'</span>)) {
	<span class="comment">//  是有样式的…… </span>
}</pre>
			</div>
		</li>
		<li>
			<b>replaceClass</b>
			<div>
				在这个元素身上替换CSS类。
				<pre>
Ext.fly(<span class="string">'elId'</span>).replaceClass(<span class="string">'myClsA'</span>, <span class="string">'myClsB'</span>);</pre>
			</div>
		</li>
		<li>
			<b>getStyle</b>
			<div>
				返回该元素的统一化当前样式和计算样式。
				<pre>
<span class="keyword">var</span> color = Ext.fly(<span class="string">'elId'</span>).getStyle(<span class="string">'color'</span>);
<span class="keyword">var</span> zIndx = Ext.fly(<span class="string">'elId'</span>).getStyle(<span class="string">'z-index'</span>);
<span class="keyword">var</span> fntFmly = Ext.fly(<span class="string">'elId'</span>).getStyle(<span class="string">'font-family'</span>);
<span class="comment">// 等等..</span>
				</pre>
			</div>
		</li>
		<li>
			<b>setStyle</b>
			<div>
				设置元素的样式，也可以用一个对象参数包含多个样式。
				<pre>
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'color'</span>, <span class="string">'#FFFFFF'</span>);
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'z-index'</span>, 10);
Ext.fly(<span class="string">'elId'</span>).setStyle({
	display : <span class="string">'block'</span>,
	overflow : <span class="string">'hidden'</span>,
	cursor : <span class="string">'pointer'</span>
});
<span class="comment">// 带有动画效果的颜色变换过程</span>
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'color'</span>, <span class="string">'#FFFFFF'</span>, true);
<span class="comment">//带有0.75秒动画的变换过程</span>
Ext.fly(<span class="string">'elId'</span>).setStyle(<span class="string">'color'</span>, <span class="string">'#FFFFFF'</span>, {duration: .75}); 
<span class="comment">// ... 等等.</span>
				</pre>
			</div>
		</li>
		<li>
			<b>getColor</b>
			<div>
				为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。
				<pre>
Ext.fly(<span class="string">'elId'</span>).getColor(<span class="string">'background-color'</span>);
Ext.fly(<span class="string">'elId'</span>).getColor(<span class="string">'color'</span>);
Ext.fly(<span class="string">'elId'</span>).getColor(<span class="string">'border-color'</span>);
<span class="comment">// ... etc.</span>
				</pre>
			</div>
		</li>
		<li>
			<b>setOpacity</b>
			<div>
				设置元素的透明度。
				<pre>
Ext.fly(<span class="string">'elId'</span>).setOpacity(.5);
Ext.fly(<span class="string">'elId'</span>).setOpacity(.45, true); <span class="comment">//  动画</span>
<span class="comment">// 附有半秒的动画过程</span>
Ext.fly(<span class="string">'elId'</span>).setOpacity(.45, {duration: .5});</pre>
			</div>
		</li>
		<li>
			<b>clearOpacity</b>
			<div>
				清除这个元素的透明度设置。
				<pre>
Ext.fly(<span class="string">'elId'</span>).clearOpacity();</pre>
			</div>
		</li>
	</ul>

</div>

<div id="dom-traversal" class="sect">
	<h2>
		Dom游历
	</h2>
	</h3>
	<p>
		已知某个位置，我们要其附近位置的dom树中游历，是一件经常性的任务。Ext
		Core里面就有这样跨浏览器的方法，允许我们在dom之中穿梭自如。再一次，CSS进入了我们的视野，使得干起复杂的任务时没那么痛苦。基于CSS3的选择符（选择器）在方面也尤其地干练！
	</p>
	<p>
		拿以下的装饰做示范：
	</p>
	<pre>
	&lt;<span class="keyword">style</span> type=<span class="string">"text/css"</span>&gt; 
	.red { color: #F00; } 
	&lt;<span class="keyword">/style</span>&gt; 
	... 
	&lt;<span class="keyword">div</span> id=<span class="string">'elId'</span>&gt; 
	&lt;<span class="keyword">ul</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;a-one&lt;/<span class="keyword">li</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;a-two&lt;/<span class="keyword">li</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;a-three&lt;/<span class="keyword">li</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;a-four&lt;/<span class="keyword">li</span>&gt; 
	&lt;/<span class="keyword">ul</span>&gt; 
	&lt;<span class="keyword">ul</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;b-one&lt;/<span class="keyword">li</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;b-two&lt;/<span class="keyword">li</span>&gt; 
	&lt;<span class="keyword">li</span>&gt;b-three&lt;/<span class="keyword">li</span>&gt;
	&lt;/<span class="keyword">ul</span>&gt; 
	&lt;/<span class="keyword">div</span>&gt;
	</pre>

	这是一堆列表元素，要让其中的偶数行变红色。要如此优雅地实现该功能，Ext不是没有，键入命令如下：

	<pre>
Ext.fly(<span class="string">'elId'</span>).select(<span class="string">'li:nth-child(2n)'</span>).addClass(<span class="string">'red'</span>);</pre>

	结果如下：
	<br />
	<img src="content-images/traversal.png" />
	<br />
	我们已见识过游历DOM方面，依靠Ext Core所带来的强大威力，——类似还有更多的，看看：
	</p>
	<ul>
		<li>
			<b>is</b>
			<div>
				测试当前元素是否与传入的选择符相符一致。
				<pre>
<span class="keyword">var</span> el = Ext.get(<span class="string">'elId'</span>);
if (el.is(<span class='string'>'p.myCls'</span>)) {
	<span class="comment">// 条件成立</span>
}</pre>
			</div>
		</li>
		<li>
			<b>findParent</b>
			<div>
				定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符。
				<pre>
Ext.fly(<span class="string">'elId'</span>).findParent(<span class="string">'div'</span>); <span class="comment">// 返回dom节点</span>
Ext.fly(<span class="string">'elId'</span>).findParent(<span class="string">'div'</span>, 4); <span class="comment">//查找4个节点</span>
Ext.fly(<span class="string">'elId'</span>).findParent(<span class="string">'div'</span>, null, true); <span class="comment">//返回Ext.Element</span>
				</pre>
			</div>
		</li>
		<li>
			<b>findParentNode</b>
			<div>
				定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。
				<pre>
Ext.fly(<span class="string">'elId'</span>).findParentNode(<span class="string">'div'</span>);</pre>
			</div>
		</li>
		<li>
			<b>up</b>
			<div>
				沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。
				<pre>
Ext.fly(<span class="string">'elId'</span>).up(<span class="string">'div'</span>);
Ext.fly(<span class="string">'elId'</span>).up(<span class="string">'div'</span>, 5); <span class="comment">//限5层的内查找</span>
				</pre>
			</div>
		</li>
		<li>
			<b>select</b>
			<div>
				传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。

				<pre>
<span class="comment">// 返回结果的CompositeElement</span>
Ext.fly(<span class="string">'elId'</span>).select(<span class="string">'div:nth-child(2)'</span>);
<span class="comment">// 返回element数组</span>
Ext.fly(<span class="string">'elId'</span>).select(<span class="string">'div:nth-child(2)', true</span>);
<span class="comment">// 整个document都会搜索</span>
Ext.select(<span class="string">'div:nth-child(2)'</span>);</pre>
			</div>
		</li>
		<li>
			<b>query</b>
			<div>
				进行一次query的查询，返回DOM 节点组成的数组。可选地第二参数设置为查询的起点，如不指定则为 document。
				<pre>
Ext.query(<span class="string">'div:nth-child(2)'</span>);  <span class="comment">// 返回dom节点组成的数组</span>
				</pre>
			</div>
		</li>
		<li>
			<b>child</b>
			<div>
				基于送入的选择符，不限定深度进行搜索，符合的话选取单个子节点。
				<pre>
Ext.fly(<span class="string">'elId'</span>).child(<span class="string">'p.highlight'</span>);  <span class="comment">// 返回的类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).child(<span class="string">'p.highlight'</span>, <span class="keyword">true</span>);  <span class="comment">// 返回dom节点</span>
				</pre>
			</div>
		</li>
		<li>
			<b>down</b>
			<div>
				基于该选择符，&quot;直接&quot;选取单个子节点。
				<pre>
Ext.fly(<span class="string">'elId'</span>).down(<span class="string">'span'</span>);  <span class="comment">// 返回 Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).down(<span class="string">'span'</span>, true);  <span class="comment">//  返回dom节点</span>
				</pre>
			</div>
		</li>
		<li>
			<b>parent</b>
			<div>
				返回当前节点的那个父节点，可选地可送入一个期待的选择符。
				<pre><span class="comment">// 返回父节点，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).parent();  
<span class="comment">// 返回父节点，类型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).parent("", true);

<span class="comment">// 返回父级节点，但一定要是div的，找到就返回，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).parent("div");</pre>
			</div>
		</li>
		<li>
			<b>next</b>
			<div>
				获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
				<pre><span class="comment">// </span><span class="comment">返回下一个侧边节点，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).next();
<span class="comment">// 返回下一个侧边节点，类型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).next("", true);
<span class="comment">// 返回下一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).next("div");</pre>
			</div>
		</li>
		<li>
			<b>prev</b>
			<div>
				获取上一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
				<pre><span class="comment">// 返回上一个侧边节点，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).prev();
<span class="comment">// </span><span class="comment">返回上一个侧边节点，类型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).prev("", true);
<span class="comment">// 返回上一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).prev("div");</pre>
			</div>
		</li>
		<li>
			<b>first</b>
			<div>
				获取第一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
				<pre><span class="comment">// 返回第一个侧边节点，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).first();
<span class="comment">// 返回第一个侧边节点，类型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).first("", true);
<span class="comment">// </span><span class="comment">返回第一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).first("div");</pre>
			</div>
		</li>
		<li>
			<b>last</b>

			<div>
				获取最后一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
				<pre><span class="comment">// 返回最后一个侧边节点，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).last();
<span class="comment">// 返回最后一个侧边节点，类型是html dom</span>
Ext.fly(<span class="string">'elId'</span>).last("", true);
<span class="comment">// 返回最后一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element</span>
Ext.fly(<span class="string">'elId'</span>).last("div");</pre>

			</div>
		</li>
	</ul>
</div>

<div id="manipulation" class="sect">
	<h2>
		DOM操控
	</h2>
	<p>
		<h3>
			Elements
		</h3>
		<p>
			DHTML常见的一项任务就是DOM元素的增、删、改、查。鉴于不同浏览器的差别很大，搞起来会很麻烦，ExtCore就设计了一个抽离不同浏览器之间差异的API，并考虑了执行速度方面的优化。我们可以轻松地围绕DOM树做增、删、改、查的任务。先观察一下这装饰元素：


			<pre>
&lt;<span class="keyword">div</span> id=<span class="string">'elId'</span>&gt;
	&lt;<span class="keyword">p</span>&gt;paragraph one&lt;/<span
					class="keyword">p</span>&gt;
	&lt;<span class="keyword">p</span>&gt;paragraph two&lt;/<span
					class="keyword">p</span>&gt;
	&lt;<span class="keyword">p</span>&gt;paragraph three&lt;/<span
					class="keyword">p</span>&gt;
&lt;/<span class="keyword">div</span>&gt;</pre>

			渲染出来这样：
			<br />
			<img src="content-images/manip-before.png" />
			<br />

			这时我们为其加入一个子节点“elId”：

			<pre>Ext.fly(<span class="string">'elId'</span>).insertFirst({
	tag: <span class="string">'p'</span>,
	html: <span class="string">'Hi! I am the new first child.'</span>

});</pre>

			插入后是这样：
			<br />
			<img src="content-images/manip-after.png" />
			<br />
			小菜一碟吧！？我们再操练一下Ext Core强大的API功能：
		</p>

		<ul>
			<li>
				<b>appendChild</b>
				<div>
					把送入的元素归为这个元素的子元素。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);
// 用id指定
Ext.fly(<span class="string">'elId'</span>).appendChild(<span class="string">'elId2'</span>);
<span class="comment">// Ext.Element添加</span>
Ext.fly(<span class="string">'elId'</span>).appendChild(el);
<span class="comment">// 选择符组合地添加</span>
Ext.fly(<span class="string">'elId'</span>).appendChild([<span class="string">'elId2'</span>,<span class="string">'elId3'</span>]);
<span class="comment">// 直接添加dom节点</span>
Ext.fly(<span class="string">'elId'</span>).appendChild(el.dom);

<span class="comment">// 添加CompositeElement，一组的div</span>
Ext.fly(<span class="string">'elId'</span>).appendChild(Ext.select(<span class="string">'div'</span>));  </pre>
				</div>
			</li>
			<li>
				<b>appendTo</b>
				<div>

					把这个元素添加到送入的元素里面。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	
// <span class="string">'elId'</span>添加到<span class="string">'elId2'</span>里面
Ext.fly(<span class="string">'elId'</span>).appendTo(<span class="string">'elId2'</span>); 
Ext.fly(<span class="string">'elId'</span>).appendTo(el);  <span class="comment">// 添加到Ext.Element el</span>
							</pre>

				</div>
			</li>
			<li>
				<b>insertBefore</b>
				<div>
					传入一个元素的参数，将其放置在当前元素之前的位置。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

<span class="comment">// </span>dom节点在前面插入
Ext.fly(<span class="string">'elId'</span>).insertBefore(<span class="string">'elId2'</span>);
<span class="comment">//</span><span class="comment">Ext.Element el</span>在前面插入
Ext.fly(<span class="string">'elId'</span>).insertBefore(el);</pre>
				</div>
			</li>
			<li>
				<b>insertAfter</b>

				<div>
					传入一个元素的参数，将其放置在当前元素之后的位置。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

<span class="comment">// </span>dom节点在后面插入
Ext.fly(<span class="string">'elId'</span>).insertAfter(<span class="string">'elId2'</span>);
<span class="comment">// Ext.Element el</span>在后面插入

Ext.fly(<span class="string">'elId'</span>).insertAfter(el);</pre>
				</div>
			</li>
			<li>
				<b>insertFirst</b>
				<div>
					可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），总之，这个元素作为当前元素的第一个子元素出现。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	


<span class="comment">// 插入的dom节点作为第一个元素</span>
Ext.fly(<span class="string">'elId'</span>).insertFirst(<span class="string">'elId2'</span>);  
<span class="comment">// 插入的Ext.Element作为第一个元素</span>
Ext.fly(<span class="string">'elId'</span>).insertFirst(el);
		
<span class="comment">// 用DomHelper配置项创建新节点，新节点会作为第一个子元素被插入。
</span>Ext.fly(<span class="string">'elId'</span>).insertFirst({
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,
	html: <span class="string">'Hi I am the new first child'</span>

});</pre>
				</div>
			</li>
			<li>
				<b>replace</b>
				<div>
					用于当前这个元素替换传入的元素。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

 <span class="comment">// 'elId'去替换'elId2'</span>

Ext.fly(<span class="string">'elId'</span>).replace(<span class="string">'elId2'</span>); 
<span class="comment">// </span><span class="comment"> 'elId'去替换'elId1'</span>
Ext.fly(<span class="string">'elId'</span>).replace(el);</pre>
				</div>
			</li>
			<li>
				<b>replaceWith</b>

				<div>
					用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId1'</span>);	

Ext.fly(<span class="string">'elId'</span>).replaceWith(<span class="string">'elId2'</span>);  <span class="comment">// 'elId2'替换掉'elId'.</span>
Ext.fly(<span class="string">'elId'</span>).replaceWith(el);  <span class="comment">// 'elId1'替换掉'elId'</span>

		
<span class="comment">// 用DomHelper配置项创建新节点，并用该节点换掉‘elId’。</span>
Ext.fly(<span class="string">'elId'</span>).replaceWith({
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,		
	html: <span class="string">'Hi I have replaced elId'</span>
});</pre>
				</div>
			</li>
		</ul>


		<h3>
			DomHelper配置项
		</h3>
		<p>
			在上面的例子中，大家可能就注意到这样的语法：
		</p>
		<pre>.insertFirst({
	tag: <span class="string">'p'</span>,
	html: <span class="string">'Hi I am the new first child'</span>
});</pre>
	<p>
		insertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素在DomHelper中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（css
		class、url、src、id等）。这里是Ext.Element一些的API，直接用来与Ext.DomHelper相交互：
		<ul>
			<li>
				<b>createChild</b>

				<div>
					传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。
					<pre><span class="keyword">var</span> el = Ext.get(<span class="string">'elId'</span>);
<span class="keyword">var</span> dhConfig = {
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,
	html: <span class="string">'Hi I have replaced elId'</span>
};


<span class="comment">// 创建新的节点，放到'elId'里面</span>
el.createChild(dhConfig); 
<span class="comment">// 创建新的节点，居el第一个子元素之前</span>
el.createChild(dhConfig, el.first());</pre>
				</div>
			</li>
			<li>
				<b>wrap</b>
				<div>
					创建一个新的元素，包裹在当前元素外面。
					<pre>Ext.fly(<span class="string">'elId'</span>).wrap(); <span class="comment">// div包着elId</span>
<span class="comment">// 用新建的一个元素来包着elId</span>
Ext.fly(<span class="string">'elId'</span>).wrap({
	tag: <span class="string">'p'</span>,
	cls: <span class="string">'myCls'</span>,		
	html: <span class="string">'Hi I have replaced elId'</span>
});</pre>
				</div>
			</li>
		</ul>

		<h3>
			Html片断
		</h3>
		<p>
			Html片断，顾名思义，系html装饰中的某一部分。Exr
			Core就是以html片断的形式修改控制dom，换言之，我们关心装饰片断即可修改该部分的dom，无须为浏览器的实现和性能而烦恼。Ext
			Core已经做足涵盖这方面的功夫，阁下所做的只是提供好相关装饰元素，如：
		</p>
		<pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
		<p>
			你猜Ext Core会怎样做？
		</P>
		<pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'beforeBegin'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
		<p>
			形成装饰元素如下：
		</P>
		<pre>&lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span
				class=keyword>p</SPAN>&gt;	
&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
		<p>
			不意外吧？这是因为我们可以自由定位插入的顺序。我们指定“beforeBegin”，就是这样：
		</P>
		<pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'afterBegin'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
		<p>
			看一看：
		</P>
		<pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;
    &lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;	
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
		<p>
			现在我们使用“beforeEnd”。
		</P>
		<pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'beforeEnd'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
		<p>
			来看看：
		</P>
		<pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;    
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;	

&lt;/<span class=keyword>div</SPAN>&gt;</PRE>
		<p>
			最后试试“afterEnd”。
		</P>
		<pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(<span class=string>'afterEnd'</SPAN>, <span class=string>'&lt;p&gt;Hi&lt;/p&gt;'</SPAN>)</PRE>
		<p>
			看看：
		</P>
		<pre>&lt;<span class=keyword>div</SPAN> id=<span class=string>'elId'</SPAN>&gt;    
    &lt;<span class=keyword>li</SPAN>&gt;one&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;two&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN>&gt;three&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN>&gt;four&lt;/<span class=keyword>li</SPAN>&gt;    
&lt;/<span class=keyword>div</SPAN>&gt;
&lt;<span class=keyword>p</SPAN>&gt;Hi&lt;/<span class=keyword>p</SPAN>&gt;</PRE>
		<p>
			处理HTML片断时下列方法也是有帮助的：
		</P>
		<ul>
			<li>
				<b>insertHtml</B>
				<div>
					插入HTML片断到这个元素。至于要插入的html放在元素的哪里，你可指定beforeBegin, beforeEnd,
					afterBegin,
					afterEnd这几种。第二个参数是插入HTML片断，第三个参数是决定是否返回一个Ext.Element类型的DOM对象。
					<pre>Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(
	<span class=string>'beforeBegin'</SPAN>,
	<span class=string>'&lt;p&gt;&lt;a href="anotherpage.html'&gt;点击我&lt;/a&gt;&lt;/p&gt;'</SPAN>

); <span class=comment>// 返回dom节点</SPAN>
Ext.fly(<span class=string>'elId'</SPAN>).insertHtml(
	<span class=string>'beforeBegin'</SPAN>,
	<span class=string>'&lt;p&gt;&lt;a href="anotherpage.html'&gt;点击我&lt;/a&gt;&lt;/p&gt;'</SPAN>,
	<span class=keyword>true</SPAN>

); <span class=comment>// 返回Ext.Element</SPAN>
					</PRE>
				</DIV>
			</li>
			<li>
				<b>remove</B>
				<div>
					从DOM里面移除当前元素，并从缓存中删除。.
					<pre>Ext.fly(<span class=string>'elId'</SPAN>).remove(); <span class=comment>// elId在缓存和dom里面都没有</SPAN>
						</PRE>
				</DIV>
			</li>
			<li>
				<b>removeNode</B>
				<div>
					移除document的DOM节点。如果是body节点的话会被忽略。
					<pre>Ext.removeNode(node); <span class=comment>// 从dom里面移除(HTMLElement)</SPAN>
							</PRE>
				</DIV>
			</LI>
		</ul>

	<h3>
		Ajax
	</h3>
	<p>
		Ext Core具备完整的Ajax API。关于本部分的详细内容会在文章尾部交待清楚不过这里先介绍API中的概貌：
	</P>

	<ul>
		<li>
			<b>load</B>
			<div>
				直接访问Updater的Ext.Updater.update()方法（相同的参数）。参数与Ext.Updater.update()方法的一致。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).load({url: <span class=string>'serverSide.php'</SPAN>})</PRE>
			</DIV>
		</li>
		<li>
			<b>getUpdater</B>
			<div>
				获取这个元素的UpdateManager。
				<pre> <span class=keyword>var</SPAN> updr = Ext.fly(<span class=string>'elId'</SPAN>).getUpdater();
				updr.update({
        url: <span class=string>'http://myserver.com/index.php'</SPAN>,
        params: {
            param1: <span class=string>"foo"</SPAN>,
            param2: <span class=string>"bar"</SPAN>
        }
});</PRE>
			</DIV>
		</LI>
	</ul>

	</p>
</div>


<div id="event-handling" class="sect">
	<h2>
		事件控制Event Handling
	</h2>
	<p>
		事件控制为解决跨浏览器的工作带来便利。
	</p>

	<p>
		正如Ext.Element封装了原生的Dom类型节点，Ext.EventObject也是封装了浏览器的原生事件对象。Ext.EventObject的实例解决了各浏览器之间的差异。例如鼠标按钮被点击了、有按键被按下了、或者要停止事件的推进等的任务都有相应的方法参与。

	</p>

	<p>
		要将事件处理器和页面中的元素绑定在一起可以使用Ext.Element的
		<i>on</I>方法。它是addListener方法的简写形式。第一个参数是要订阅的事件类型和第二个参数是准备触发的事件函数。


		<pre>Ext.fly('myEl').on('click', function(e, t) {
	// myEl有点击的动作
	// e是这次产生的事件对象，Ext.EventObject
	// t是HTMLElement目标
});
</PRE>

		Ext
		Core常规化了所有DOM事件的参数。事件处理器总会被送入一个常规化的事件对象（Ext.EventObject）和目标元素，HTMLElement。

	</p>

	<p>
		这些是用于事件处理方面的API：
	</p>
	<ul>
		<li>
			<b>addListener/on</B>
			<div>
				为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价，写代码时更省力。
				<pre><span class=keyword>var</SPAN> el = Ext.get(<span class=string>'elId'</SPAN>);
el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// e是一个标准化的事件对象(Ext.EventObject)</SPAN>

	<span class=comment>// t就是点击的目标元素，这是个Ext.Element.</SPAN>
	<span class=comment>// 对象指针this也指向t</SPAN>			
});</PRE>
			</DIV>
		</li>
		<li>
			<b>removeListener/un</B>
			<div>
				从这个元素上移除一个事件处理函数。un()是它的简写方式。
				<pre><span class=keyword>var</SPAN> el = Ext.get(<span class=string>'elId'</SPAN>);
el.un(<span class=string>'click'</SPAN>, <span class=keyword>this</SPAN>.handlerFn);
<span class=comment>// 或</SPAN>
el.removeListener(<span class=string>'click'</SPAN>, <span class=keyword>this</SPAN>.handlerFn);</PRE>
			</DIV>
		</li>
		<li>
			<b>Ext.EventObject</B>
			<div>
				EventObject呈现了统一各浏览器的这么一个事件模型，并尽量符合W3C的标准方法。
				<pre><span class=comment>// e它不是一个标准的事件对象，而是Ext.EventObject。</SPAN>
<span class=keyword>function</SPAN> handleClick(e){ 
    e.preventDefault();
    <span class=keyword>var</SPAN> target = e.getTarget();
    ...
}

<span class=keyword>var</SPAN> myDiv = Ext.get(<span class=string>'myDiv'</SPAN>);
myDiv.on(<span class=string>"click"</SPAN>, handleClick);
<span class=comment>// 或</SPAN>
Ext.EventManager.on(<span class=string>'myDiv'</SPAN>, <span class=string>'click'</SPAN>, handleClick);
Ext.EventManager.addListener(<span class=string>'myDiv'</SPAN>, <spanclass=string>'click'</SPAN>, handleClick);</PRE>
			</DIV>
		</LI>
	</ul>
</div>

<div id="adv-event-handling" class="sect">
	<h2>
		高级事件功能
	</h2>
	<p>
		事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，Ext Core在此方面提供了一系列的配置选项。
		<ul>
			<li>
				<b>委托delegation</B>
				<div>
					减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基本要义是：
					<blockquote>
						<p>
							并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。
						</p>
					</BLOCKQUOTE>
					这不是说要求我们在body元素挂上一个全局的事件，这会导致页面内的任何动作都会触发那个事件，无疑很有可能会带来反效果的，我们想提升效能却会更慢……因此，我们说，适用的场景应该像是下拉列表、日历等等这样拥有一群元素的控件，直接或间接地体现在一个容器身上的那么一个控件。下面一个大的ul元素为例子：
					<br>
					<br>
					以装饰作示例：
					<div>
						<pre>&lt;<span class=keyword>ul</SPAN> id=<span class=string>'actions'&gt;
    &lt;<span class=keyword>li</SPAN> id=<span class=string>'btn-edit'&gt;&lt;/<span class=keyword>li</SPAN>&gt;

    &lt;<span class=keyword>li</SPAN> id=<span class=string>'btn-delete'&gt;&lt;/<span class=keyword>li</SPAN>&gt;
    &lt;<span class=keyword>li</SPAN> id=<span class=string>'btn-cancel'&gt;&lt;/<span class=keyword>li</SPAN>&gt;
&lt;/<span class=keyword>ul</SPAN>&gt;</SPAN></PRE>
						不是登记一个处理器而是为
						<b>逐个</B>列表项（list item）都登记：
						<pre>Ext.fly(<span class=string>'btn-edit'</SPAN>).on(<span class=string>'click</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// 执行事件具体过程</SPAN>
});
Ext.fly(<span class=string>'btn-delete'</SPAN>).on(<span class=string>'click</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// 执行事件具体过程</SPAN>
});
Ext.fly(<span class=string>'btn-cancel'</SPAN>).on(<span class=string>'click</SPAN>, <span class=keyword>function</SPAN>(e,t) {
	<span class=comment>// 执行事件具体过程</SPAN>
});</PRE>
						要使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：
						<pre>Ext.fly(<span class=string>'actions'</SPAN>).on(<span class=string>'click</SPAN>, function(e,t) {
	switch(t.id) {
		case <span class=string>''btn-edit'</SPAN>:
		// <span class=comment>处理特定元素的事件具体过程</SPAN>
		break;
		case <span class=string>'btn-delete'</SPAN>:
		// <span class=comment>处理特定元素的事件具体过程</SPAN>
		break;
		case <span class=string>'btn-cancel'</SPAN>:
		// <span class=comment>处理特定元素的事件具体过程</SPAN>
		break;
	}
});</PRE>
						基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件。
					</DIV>
					<br>
				</DIV>
				</li>
				<li>
					<b>委托化delegate</B>
					<div>
						你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符，用于过滤目标元素，或是往下一层查找目标的子孙。
						<pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 执行事件具体过程</SPAN>

}, <span class=keyword>this</SPAN>, {
    <span class=comment>// 对子孙'clickable'有效</SPAN>
    delegate: <span class=string>'.clickable'</SPAN> 
});</PRE>
					</DIV>
					</li>
					<li>
						<b>翻转hover</B>
						<div>
							这是一个Ext的翻转菜单的实例：
							<pre><span class=comment>// handles when the mouse enters the element</SPAN>	
<span class=keyword>function</SPAN> enter(e,t){
    t.toggleClass(<span class=string>'red'</SPAN>);
}
<span class=comment>// handles when the mouse leaves the element</SPAN>
<span class=keyword>function</SPAN> leave(e,t){
    t.toggleClass(<span class=string>'red'</SPAN>);
}
<span class=comment>// subscribe to the hover</SPAN>

el.hover(over, out);</PRE>
						</DIV>
						</li>
						<li>
							<b>移除事件句柄removeAllListeners</B>
							<div>
								在该元素身上移除所有已加入的侦听器。
								<pre>el.removeAllListeners();</PRE>
							</DIV>
							</li>
							<li>
								<b>是否一次性触发single</B>
								<div>
									你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。
									<pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// </SPAN><span class=comment>执行事件具体过程</SPAN>
}, <span class=keyword>this</SPAN>, {
    single: <span class=keyword>true</SPAN> <span class=comment>// 触发一次后不会再执行事件了</SPAN>

});</PRE>
								</DIV>
								</li>
								<li>
									<b>缓冲buffer</B>
									<div>
										你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会被启用，但是新处理器句柄会安排在其位置。
										<pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 执行事件具体过程</SPAN>

}, <span class=keyword>this</SPAN>, {
    buffer: 1000 <span class=comment>// 重复响应事件以一秒为时间间隔</SPAN>
});</PRE>
									</DIV>
									</li>
									<li>
										<b>延时delay</B>
										<div>
											你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。
											<pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 执行事件具体过程</SPAN>

}, <span class=keyword>this</SPAN>, {
    <span class=comment>// 延迟事件，响应事件后开始计时（这里一秒）</SPAN>
    delay: 1000 
    
});</PRE>
										</DIV>
										</li>
										<li>
											<b>目标target</B>
											<div>
												你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素，你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。
												<pre>el.on(<span class=string>'click'</SPAN>, <span class=keyword>function</SPAN>(e,t) {
    <span class=comment>// 执行事件具体过程</SPAN>
}, <span class=keyword>this</SPAN>, {
    <span class=comment>// 遇到里头的第一个'div'才会触发事件</SPAN>
    target: el.up(<span class=string>'div'</SPAN>) 
});</PRE>
											</DIV>
										</LI>
		</ul>
	</p>
</div>


<div id="dim-sizing" class="sect">
	<h2>
		尺寸&amp;大小
	</h2>
	<p>
		某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下，Ext
		Core也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示这是默认的动画。我们来看一看：


		<pre><span class=comment>// 设置高度为200px以默认配置进行动画</SPAN>
Ext.fly(<span class=string>'elId'</SPAN>).setHeight(200, true);

<span class=comment>// 设置高度为150px以自定义的配置进行动画
</SPAN>Ext.fly(<span class=string>'elId'</SPAN>).setHeight(150, {
    duration : .5, <span class=comment>// 动画将会持续半秒</SPAN>
    <span class=comment>// 动画过后改变其内容为“结束”</SPAN>

    callback: <span class=keyword>function</SPAN>(){ <span class=keyword>this</SPAN>.update(<span class=string>"结束"</SPAN>); } 
});</PRE>
		拉出Firebug，检测一下元素（右击后选择元素“Inspect Element”），观察右方的面板并点击“layout”，您应会看到这样：
		<br />
		<img src="content-images/firebug-layout-sm.png" />
		<br />


		这块地方提供的信息足够清楚显示有关该元素的所有尺寸。从中得知，当前元素宽895px、高1669px、0px的内边距、0px的边框和0px的外边距。不过这些信息亦可从Ext
		Core的Ext.Element的API查询得知！
		<pre><span class=keyword>var</SPAN> dimSz = Ext.get(<span class=string>'dim-sizing'</SPAN>);
<span class=keyword>var</SPAN> padding = dimSz.getPadding(<span class=string>'lrtb'</SPAN>); <span class=comment>// 返回0px的值</SPAN>
<span class=keyword>var</SPAN> border = dimSz.getBorderWidth(<span class=string>'lrtb'</SPAN>); <span class=comment>// 返回0px的值</SPAN>

<span class=keyword>var</SPAN> height = dimSz.getHeight(); <span class=comment>// 返回1691px的值</SPAN>
<span class=keyword>var</SPAN> width = dimSz.getWidth(); <span class=comment>// 返回895px的值</SPAN>
			</PRE>

		把代码弄进Firebug调试看看，有否这样的结果？实际上用这些set的方法改变高度或宽度后就可立即在firebug的layout面板看到的。(
		<b>注意：</B>if如果对图片设置其不同大小的高度或宽度，那就是浏览器的尺寸。如果你在浏览器中浏览图片元素的实际情况那就是实际的输出大小。）
		<br />
		<br />

		剩下的API是哪些？我们看看:
	<ul>
		<li>
			<b>getHeight</B>
			<div>
				返回元素的偏移（offset）高度。
				<pre><span class=keyword>var</SPAN> ht = Ext.fly(<span class=string>'elId'</SPAN>).getHeight();</PRE>
			</DIV>
		</li>
		<li>
			<b>getWidth</B>
			<div>
				返回元素的偏移（offset）宽度。
				<pre><span class=keyword>var</SPAN> wd = Ext.fly(<span class=string>'elId'</SPAN>).getWidth();</PRE>
			</DIV>
		</li>
		<li>
			<b>setHeight</B>
			<div>
				设置元素的高度。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setHeight();</PRE>
			</DIV>
		</li>
		<li>
			<b>setWidth</B>
			<div>
				设置元素的宽度。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setWidth();</PRE>
			</DIV>
		</li>
		<li>
			<b>getBorderWidth</B>
			<div>
				返回指定边（side(s)）的padding宽度。
				<pre><span class=keyword>var</SPAN> bdr_wd = Ext.fly(<span class=string>'elId'</SPAN>).getBorderWidth(<span class=string>'lr'</SPAN>);</PRE>
			</DIV>
		</li>
		<li>
			<b>getPadding</B>
			<div>
				可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到(l)eft padding +(r)ight padding。
				<pre><span class=keyword>var</SPAN> padding = Ext.fly(<span	class=string>'elId'</SPAN>).getPadding(<span class=string>'lr'</SPAN>);</PRE>
			</DIV>
		</li>
		<li>
			<b>clip</B>
			<div>
				保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip()来移除。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).clip();</PRE>
			</DIV>
		</li>
		<li>
			<b>unclip</B>
			<div>
				在调用clip()之前，返回原始的裁剪部分（溢出的）。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).unclip();</PRE>
			</DIV>
		</li>
		<li>
			<b>isBorderBox</B>
			<div>
				测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。
				<pre>if (Ext.isBorderBox) {
    <span class=comment>// </SPAN>
}</PRE>
			</DIV>

		</LI>
	</ul>
	</p>
</div>


<div id="positioning" class="sect">
	<h2>
		定位
	</h2>
	<p>
		通过Ext
		Core定义的API能快速地采集元素位置的各方面数据，归纳为get的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literal
		configuration object），或即就是以个布尔型的true，表示这是默认的动画。我们来看一看例子是怎样子的：


		<pre><span class=comment>// 改变x-coord为75px，附有自定义的动画配置</SPAN>
Ext.fly(<span class=string>'elId'</SPAN>).setX(75, {
    duration : .5, <span class=comment>// 动画将会持续半秒</SPAN>
    <span class=comment>// 动画过后改变其内容为“结束”</SPAN>

    callback: <span class=keyword>function</SPAN>(){ <span class=keyword>this</SPAN>.update(<span class=string>"结束"</SPAN>); }
});
</PRE>
	<ul>
		<li>
			<b>getX</B>
			<div>
				返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre><span class=keyword>var</SPAN> elX = Ext.fly(<span class=string>'elId'</SPAN>).getX()</PRE>
			</DIV>
		</li>
		<li>
			<b>getY</B>
			<div>
				返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre><span class=keyword>var</SPAN> elY = Ext.fly(<span class=string>'elId'</SPAN>).getY()</PRE>
			</DIV>
		</li>
		<li>
			<b>getXY</B>
			<div>
				返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre><span class=keyword>var</SPAN> elXY = Ext.fly(<span class=string>'elId'</SPAN>).getXY() <span class=comment>// elXY是数组</SPAN></PRE>
			</DIV>
		</li>
		<li>
			<b>setX</B>
			<div>
				返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setX(10)</PRE>
			</DIV>
		</li>
		<li>
			<b>setY</B>
			<div>
				返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setY(10)</PRE>
			</DIV>
		</li>
		<li>
			<b>setXY</B>
			<div>
				返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setXY([20,10])</PRE>
			</DIV>
		</li>
		<li>
			<b>getOffsetsTo</B>
			<div>
				返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
				<pre><span class=keyword>var</SPAN> elOffsets = Ext.fly(<span class=string>'elId'</SPAN>).getOffsetsTo(anotherEl);</PRE>
			</DIV>
		</li>
		<li>
			<b>getLeft</B>
			<div>
				获取左边的X坐标。
				<pre> <span class=keyword>var</SPAN> elLeft = Ext.fly(<span class=string>'elId'</SPAN>).getLeft();</PRE>
			</DIV>
		</li>
		<li>
			<b>getRight</B>
			<div>
				获取元素右边的X坐标（元素X位置 + 元素宽度）。
				<pre><span class=keyword>var</SPAN> elRight = Ext.fly(<span class=string>'elId'</SPAN>).getRight();</PRE>
			</DIV>
		</li>
		<li>
			<b>getTop</B>
			<div>
				获取顶部Y坐标。
				<pre><span class=keyword>var</SPAN> elTop = Ext.fly(<span class=string>'elId'</SPAN>).getTop();</PRE>
			</DIV>
		</li>
		<li>
			<b>getBottom</B>
			<div>
				获取元素的底部Y坐标（元素Y位置 + 元素宽度）。
				<pre> <span class=keyword>var</SPAN> elBottom = Ext.fly(<span class=string>'elId'</SPAN>).getBottom();</PRE>
			</DIV>
		</li>
		<li>
			<b>setLeft</B>
			<div>
				直接使用CSS样式（代替setX()），设定元素的left位置。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setLeft(25)</PRE>
			</DIV>
		</li>
		<li>
			<b>setRight</B>
			<div>
				设置元素CSS Right的样式。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setRight(15)</PRE>
			</DIV>
		</li>
		<li>
			<b>setTop</B>
			<div>
				直接使用CSS样式（代替setY()），设定元素的top位置。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setTop(12)</PRE>
			</DIV>
		</li>
		<li>
			<b>setBottom</B>
			<div>
				设置元素CSS Bottom的样式。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setBottom(15)</PRE>
			</DIV>
		</li>
		<li>
			<b>setLocation</B>
			<div>
				无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setLocation(15,32)</PRE>
			</DIV>
		</li>
		<li>
			<b>moveTo</B>
			<div>
				无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).moveTo(12,17)</PRE>
			</DIV>
		</li>
		<li>
			<b>position</B>
			<div>
				初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).position(<span class=string>"relative"</SPAN>)</PRE>
			</DIV>
		</li>
		<li>
			<b>clearPositioning</B>
			<div>
				当文档加载后清除位置并复位到默认。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).clearPositioning()	
Ext.fly(<span class=string>'elId'</SPAN>).clearPositioning(<span class=string>"top"</SPAN>)</PRE>
			</DIV>
		</li>
		<li>
			<b>getPositioning</B>
			<div>
				返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。
				<pre><span class=keyword>var</SPAN> pos = Ext.fly(<span class=string>'elId'</SPAN>).getPositioning()</PRE>
			</DIV>
		</li>
		<li>
			<b>setPositioning</B>
			<div>
				由getPositioning()返回的对象去进行定位。
				<pre>Ext.fly(<span class=string>'elId'</SPAN>).setPositioning({
    left: <span class=string>'static'</SPAN>,
    right: <span class=string>'auto'</SPAN>
})</PRE>
			</DIV>
		</li>
		<li>
			<b>translatePoints</B>
			<div>
				送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。
				<pre><span class=comment>// {left:translX, top: translY}</SPAN>
<span class=keyword>var</SPAN> points = Ext.fly(<span class=string>'elId'</SPAN>).translatePoints(15,18); </PRE>
			</DIV>
		</LI>
	</ul>
	</p>
</div>


<div id="animations" class="sect">
	<h2>
		动画
	</h2>
	<p>
		Ext Core已经齐备了若干的动画的插件，附加在Ext.Element的身上，让你进一步地发挥这一组组预配置的动画，作出更“酷”的东东来。

		<div id="slideEl"
			style="background-color: #F00; width: 100px; height: 100px;"></div>
		<pre>
Ext.fly(<span class=string>'slideEl'</span>).slideOut(<span class=string>'r'</span>);</pre>
		放在Firebug里面运行这段代码看看，你将发现Ext就内建了一组完整的动画。每一组动画就是使用这些配置字面对象（configuration
		object literal），去制定这些动画如何产生。不一定要默认的配置，或者你也可以在动画执行完毕后接着执行一个回调函数：
		<pre>
Ext.fly(<span class=string>'slideEl'</span>).slideOut(<span class=string>'r'</span>, {
	callback : <span class=keyword>function</span>(){
		alert(<span class=string>'元素已滑出');
	}
});	</pre>

		可以看出这样子做动画着实强大！
		<br />
		<br />
		动画支持八方位的定向，所以你可以选择八个不同的定位点来启动您的动画效果。
		<table align="center">
			<thead>
				<tr>
					<th>
						Valuer
					</TH>
					<th></TH>
				</TR>
			</THEAD>
			<tbody>
				<tr>
					<td>
						tl
					</TD>
					<td>
						The top left corner左上角
					</TD>
				</TR>
				<tr>
					<td>
						t
					</TD>
					<td>
						The center of the top edge顶部中央
					</TD>
				</TR>
				<tr>
					<td>
						tr
					</TD>
					<td>
						The top right corner右上角
					</TD>
				</TR>
				<tr>
					<td>
						l
					</TD>
					<td>
						The center of the left edge左边中央
					</TD>
				</TR>
				<tr>
					<td>
						r
					</TD>
					<td>
						The center of the right edge右边中央
					</TD>
				</TR>
				<tr>
					<td>
						bl
					</TD>
					<td>
						The bottom left corner左下角
					</TD>
				</TR>
				<tr>
					<td>
						b
					</TD>
					<td>
						The center of the bottom edge底部中央
					</TD>
				</TR>
				<tr>
					<td>
						br
					</TD>
					<td>
						The bottom right corner右下角
					</TD>
				</TR>
			</TBODY>
		</TABLE>



		进一步浏览里面的API：
	<ul>
		<li>
			<b>slideIn/slideOut</B>
			<div>
				将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起始点。该函数会在需要的时候自动将元素与一个固定尺寸的容器封装起来。有效的定位锚点可以参见
				Fx 类的概述。用法：
				<pre><span class=comment>// 默认情况：将元素从顶部滑入</SPAN>

el.slideIn();
<span class=comment>// </SPAN>自定义：在2秒钟内将元素从右边滑入
el.slideOut();

<span class=comment>// 常见的配置选项及默认值</SPAN>
el.slideIn(<span class=string>'t'</SPAN>, {
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5
});
el.slideOut(<span class=string>'t'</SPAN>, {
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
			</DIV>
		</li>
		<li>
			<b>puff</B>
			<div>
				渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility = 'hidden'）， 但是块元素仍然会在
				document 对象中占据空间。如果需要将元素从 DOM 树删除，则使用'remove'配置选项。用法：
				<pre>// 默认
el.puff();

<span class=comment>// 常见的配置选项及默认值</SPAN>
el.puff({
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
			</DIV>
		</li>
		<li>
			<b>switchOff</B>
			<div>
				类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩（类似于关闭电视机时的效果）。 特效结束后，元素会被隐藏（visibility =
				'hidden'），但是块元素仍然会在 document 对象中占据空间。 如果需要将元素从 DOM
				树删除，则使用'remove'配置选项。用法：
				<pre>// 默认
el.switchOff();

<span class=comment>// 所有的配置选项及默认值</SPAN>
el.switchOff({
    easing: <span class=string>'easeIn'</SPAN>,
    duration: .3,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
			</DIV>
		</li>
		<li>
			<b>highlight</B>
			<div>
				根据设置的颜色高亮显示 Element 对象（默认情况下应用于 background-color
				属性，但是也可以通过&quot;attr&quot;配置选项来改变），然后渐隐为原始颜色。如果原始颜色不可用，你应该设置&quot;endColor&quot;配置选项以免动画结束后被清除。用法：
				<pre><span class=comment>// 默认情况：高亮显示的背景颜色为黄色</SPAN>
el.highlight();

<span class=comment>// </SPAN>自定义：高亮显示前景字符颜色为蓝色并持续2秒
el.highlight(<span class=string>"ffff9c"</SPAN>, {
    <span class=comment>// 可以任何有效的CSS属性表示颜色</SPAN>

    attr: <span class=string>"background-color"</SPAN>, 
    endColor: (current color) or <span class=string>"ffffff"</SPAN>,
    easing: <span class=string>'easeIn'</SPAN>,
    duration: 1
});</PRE>
			</DIV>
		</li>
		<li>
			<b>frame</B>
			<div>
				展示一个展开的波纹，伴随着渐隐的边框以突出显示 Element 对象。用法：
				<pre><span class=comment>// 默认情况：一个淡蓝色的波纹</SPAN>
el.frame();

<span class=comment>// 自定义：三个红色的波纹并持续3秒</SPAN>
el.frame(<span class=string>"C3DAF9"</SPAN>, 1, {
    duration: 1 <span class=comment>//每个波纹持续的时间
    </SPAN><span class=comment>// 注意：这里不能使用 Easing 选项在，即使被包含了也会被忽略</SPAN>
});</PRE>
			</DIV>
		</li>
		<li>
			<b>pause</B>
			<div>
				在任何后续的等效开始之前创建一次暂停。如果队列中没有后续特效则没有效果。用法：
				<pre>el.pause(1);</PRE>
			</DIV>
		</li>
		<li>
			<b>fadeIn/fadeOut</B>
			<div>
				将元素从透明渐变为不透明。结束时的透明度可以根据&quot;endOpacity&quot;选项来指定。用法：
				<pre><span class=comment>// </SPAN>默认情况：将可见度由 0 渐变到 100%

el.fadeIn();
el.fadeOut();

<span class=comment>// </SPAN>自定义：在2秒钟之内将可见度由 0 渐变到 75%
el.fadeIn({
    endOpacity: 1, // 可以是 0 到 1 之前的任意值（例如：.5）	
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5
});
el.fadeOut({
    endOpacity: 0, // 可以是 0 到 1 之前的任意值（例如：.5）
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
			</DIV>
		</li>
		<li>
			<b>scale</B>
			<div>
				以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。用法：
				<pre><span class=comment>// </SPAN>将宽度和高度设置为 100x100 象素
el.scale(100, 100);

<span class=comment>// 常见的配置选项及默认值。<br>// 如果给定值为 null，则高度和宽度默认被设置为元素已有的值。
</SPAN>el.scale(
    [element's width],
    [element's height], {
	    easing: <span class=string>'easeOut'</SPAN>,
	    duration: .35
	}
);</PRE>
			</DIV>
		</li>
		<li>
			<b>shift</B>
			<div>
				以动画展示元素任意组合属性的改变，如元素的尺寸、位置坐标和（或）透明度。如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生改变。为了使该特效生效，则必须在配置选项对象中设置至少一个新的尺寸、位置坐标或透明度属性。用法：
				<pre><span class=comment>// 将元素水平地滑动到X坐标值为200的位置，同时还伴随着高度和透明度的改变
</SPAN>el.shift({ x: 200, height: 50, opacity: .8 });

<span class=comment>// 常见的配置选项及默认值。</SPAN>
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .35
});</PRE>
			</DIV>
		</li>
		<li>
			<b>ghost</B>
			<div>
				将元素从视图滑出并伴随着渐隐。作为可选参数传入的定位锚点将被设置为滑出特效的结束点。用法：
				<pre><span class=comment>// 默认情况：将元素向下方滑出并渐隐</SPAN>
el.ghost();

<span class=comment>// </SPAN>自定义：在2秒钟内将元素向右边滑出并渐隐
el.ghost(<span class=string>'b'</SPAN>, {
    easing: <span class=string>'easeOut'</SPAN>,
    duration: .5,
    remove: <span class=keyword>false</SPAN>,
    useDisplay: <span class=keyword>false</SPAN>

});</PRE>
			</DIV>
		</li>
		<li>
			<strong>复杂的动画</strong>
			<div>
				<div id=complexEl
					style="BORDER-RIGHT: rgb(0, 0, 0) 0px solid; BORDER-TOP: rgb(0, 0, 0) 0px solid; BORDER-LEFT: rgb(0, 0, 0) 0px solid; WIDTH: 100px; BORDER-BOTTOM: rgb(0, 0, 0) 0px solid; HEIGHT: 100px; BACKGROUND-COLOR: rgb(255, 0, 0)"></DIV>
				<p>
					我们也可以用ExtCore的动画系统来建立我们制定的动画，在Firebug里面测试一下下面的代码：
				</p>
				<pre><span class=keyword>var</SPAN> el = Ext.get(<span class=string>'complexEl'</SPAN>)
el.animate({
	borderWidth: {to: 3, from: 0},
	opacity: {to: .3, from: 1},
	height: {to: 50, from: el.getHeight()},
	width: {to: 300, from: el.getWidth()}	
});</PRE>
			</DIV>
		</LI>
	</ul>
	</p>
</div>

<div id="misc" class="sect">
	<h2>
		杂项
	</h2>
	<p>
		以上未能分类的就这里列出，都是Ext.Element方法。
		<ul>
			<li>
				<b>focus</B>
				<div>
					使这个元素得到焦点。忽略任何已捕获的异常。
					<pre>el.focus();</PRE>
				</DIV>
			</li>
			<li>
				<b>blur</B>
				<div>
					使这个元素失去焦点。忽略任何已捕获的异常。
					<pre>el.blur();</PRE>
				</DIV>
			</li>
			<li>
				<b>getValue</B>
				<div>
					回“值的”属性值。
					<pre>el.getValue();
el.getValue(<span class=keyword>true</SPAN>); <span class=comment>// 输出值为数字型</SPAN>
</PRE>
				</DIV>
			</li>
			<li>
				<b>isBorderBox</B>
				<div>
					测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。
					<pre>if (Ext.isBorderBox) { }</PRE>
				</DIV>
			</li>
			<li>
				<b>getAttributeNS</B>
				<p>
					在DOM节点中的某个元素，返回其一个命名空间属性的值。
				</P>
				<pre>el.getAttributeNS("","name");</PRE>
			</LI>
		</ul>
	</p>
</div>

